<template>
    <!-- 不同页面都会引用这个星级小组件，所以这个组件放在components公共组件文件夹中 -->
    <div class="star-box">
        <i v-for="i in 5" v-bind:key= "i" :class="getClass(i)"></i>
    </div>
</template>

<script>
    export default {
        props: {
            score: {
                default: 5
            }
        },
        methods: {
            getClass(i){
                if(this.score % 1 === 0){
                    return i <= this.score?"icon-star-active":"icon-star";
                }else{
                    if(i < this.score){
                        return "icon-star-active";
                    }else if(i == Math.ceil(this.score)){ //ceil向上取整，得到半星对应的i的index值
                        return "icon-star-half";
                    }else{
                        return "icon-star";
                    }
                        
                }

            }
        }
    }
</script>

<style lang="scss" scoped>
    .star-box{
        //设置星星的容器为行内元素，使得星星与其他元素排布在同一行中。
        display: inline-block;
        i{
            width: 12px;
            height: 12px;
            display: inline-block;
            line-height: 0;
            margin-right: 2px;
            background-size: 100%;
            &.icon-star{
                background-image: url(./images/star.png);
            }
            &.icon-star-active{
                background-image: url(./images/star-active.png);
            }
            &.icon-star-half{
                background-image: url(./images/star-half.png);
            }
        }
    }

</style>